<!DOCTYPE html>
<html lang="ch" xmlns="http://www.w3.org/1999/html">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <meta charset="UTF-8">
    <title>选手表格</title>
    <style>
        .table11_7 table {
            width:100%;
            margin:15px 0;
            border:0;
        }
        .table11_7 th {
            background-color:#00A5FF;
            color:#FFFFFF;
            width:200px;
        }
        .table11_7,.table11_7 th,.table11_7 td {
            font-size:0.95em;
            text-align:center;
            padding:4px;
            border-collapse:collapse;
        }
        .table11_7 th,.table11_7 td {
            border: 1px solid #2087fe;
            border-width:1px 0 1px 0;
            border:2px inset #ffffff;
        }
        .table11_7 tr {
            border: 1px solid #ffffff;
        }
        .table11_7 tr:nth-child(odd){
            background-color:#aae1fe;
        }
        .table11_7 tr:nth-child(even){
            background-color:#ffffff;
        }
    </style>
    <script type="text/javascript">

        $(function () {

            // ajaxT();

            /* $('#myForm').submit(function(event) {
                // 阻止表单默认提交行为
                event.preventDefault();
                ajaxT();
            }); */
        });

        function ajaxT() {
            var url = "http://localhost:80/goodsDetails/getPage?"
            url = url.concat("pageSize=10","&pageNo=1")

            var postData = {
                title: $('#title').val()
            };

            $.ajax({
                    type: "POST",
                    contentType: "application/json", //必须这样写
                    url: url,
                    data: JSON.stringify(postData),
                    datatype: "JSON",
                    success: function (result) {
                        console.log(JSON.stringify(result));
                        createTable(result.data.records);
                    }
                }
            );
        }

        //动态的创建一个table
        function createTable(data) {

            var tableStr = "<table class='tab-list' width='800px' border='1'>";
            tableStr = tableStr
                + "<tr class='list-header'>"
                + "<td width='5%'>序号</td>"
                + "<td width='5%'><input id='checkAll' name='checkAll' type='checkbox' /></td>"
                + "<td width='20%'>用户姓名</td>"
                + "<td width='10%'>工号</td>"
                + "<td width='10%'>职位</td>"
                + "<td width='10%'>年龄</td>"
                + "<td width='20%'>创建时间</td>"
                + "<td width='20%'>更新时间</td>"
                + "</tr>"

            var len = data.length;
            if (len === 0) {
                tableStr = tableStr + "<tr style='text-align: center'>"
                    + "<td colspan='6'><font color='#cd0a0a'>" + "暂无记录" + "</font></td>"
                    + "</tr>";
            } else{
                for (var i = 0; i < len; i++) {
                    tableStr = tableStr + "<tr>"
                        + "<td>" + (i + 1) + "</td>"
                        + "<td><input class='check' id='checkOne' name='checkOne' type='checkbox' value='" + data[i].key + "' /></td>"
                        + "<td>" + data[i].title + "</td>"
                        + "<td>" + data[i].description + "</td>"
                        + "<td>" + data[i].image + "</td>"
                        + "<td>" + data[i].price + "</td>"
                        + "<td>" + data[i].createTime + "</td>"
                        + "<td>" + data[i].updateTime + "</td>"
                        + "</tr>";
                }
            }
            tableStr = tableStr + "</table>";
            //添加到div中
            $("#tableAjax").html(tableStr);
        }

    </script>
</head>

<body>
    <div align="center">
        <H2>Hello, World</H2>
        <table class=table11_7>
            <tr>
                <th>编号</th><th>功能</th><th>地址</th>
            </tr>
            <tr>
                <td>2</td><td>选手表格</td><td><a href="http://localhost/player/playerTable">跳转到【选手页面】</a></td>
            </tr>
        </table>
    </div>
</body>
</html>
